<template>
    <div>
      {{str}}  ---  {{ num }}
      <!-- <button v-on:click="add">+1</button> -->
      <button v-on:click="add(2)">+2</button>
      <!-- @ 是 v-on指令的语法糖  v-on:事件类型="事件处理函数"-->
      <button @click="sub($event)">-1</button>
      <!-- <button @click="num--">-1</button> -->
  
      <div>{{ str }}</div>
  
      <a v-bind:href="url" target="_blank">{{ name }}</a>
      <!-- 标签的属性 动态绑定类名 -->
      <!-- 语法糖  :-->
      <img :src="imgUrl"/>
      <!-- <img src=""/> -->
      <!-- <div v-bind:class=""></div> -->
    </div>
  </template>
  <script setup>
  import { ref } from 'vue'
  
  let num = ref(10)
  
  let str = 'hello'
  
  // 链接的地址是动态 /从后台获取到的
  let name = ref('百度一下')
  let url = ref('https://www.baidu.com')
  let imgUrl = ref('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')
  
  // let add = ()=>{
  //   console.log(num);
  //   num.value++
  // }
  
  // 事件绑定
  function add(a) {
    // += : num = num + a
    num.value+=a
  }
  
  // -1事件
  let sub = (e)=>{
    console.log(e);
    num.value--
  }
  
  </script>
  <style scoped>
  </style>